<!--  -->
<template>
  <div class="welcome-guide">
    <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="490px" @closed="close" :close-on-click-modal="false">
      <div class="welcome">欢迎使用刺猬响站，是否选择官方模版快速搭建网站？</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button type="primary" @click="selectTemplate" size="small">选择模板</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    editorThemeTemplate: {
      type: Function
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    close () {
      this.dialogVisible = false
    },
    selectTemplate () {
      this.editorThemeTemplate()
      this.dialogVisible = false
    }
  }
}

</script>
<style scoped>
.welcome-guide .welcome{
  text-align: center;
  font-size: 18px;
  color: #333;
}
</style>
